<section id="avatar"  class="w-full rounded-lg border scroll-mt-14">
  <header class="border-b px-4 py-3 flex items-center justify-between">
    <h2 class="text-sm font-medium">Avatar</h2>
    <a href="/components/avatar" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
      {% lucide "book-open", { "class": "size-4" }   %}
    </a>
  </header>
  <div class="p-4">
    <div class="flex flex-row flex-wrap items-center gap-4">
      <img class="size-8 shrink-0 object-cover rounded-full" alt="@hunvreus" src="https://github.com/hunvreus.png">
      
      <span class="size-8 shrink-0 bg-muted flex items-center justify-center rounded-full">CN</span>
      
      <img class="size-12 shrink-0 object-cover rounded-full" alt="@hunvreus" src="https://github.com/hunvreus.png">
      
      <img class="size-8 shrink-0 object-cover rounded-lg" alt="@hunvreus" src="https://github.com/hunvreus.png">

      <div class="flex -space-x-2 [&_img]:ring-background [&_img]:ring-2 [&_img]:grayscale [&_img]:size-8 [&_img]:shrink-0 [&_img]:object-cover [&_img]:rounded-full">
        <img alt="@hunvreus" src="https://github.com/hunvreus.png">
        <img alt="@shadcn" src="https://github.com/shadcn.png">
        <img alt="@adamwathan" src="https://github.com/adamwathan.png">
      </div>

      <div class="flex -space-x-2 [&_img]:ring-background [&_img]:ring-2 [&_img]:grayscale [&_img]:size-12 [&_img]:shrink-0 [&_img]:object-cover [&_img]:rounded-full">
        <img alt="@hunvreus" src="https://github.com/hunvreus.png">
        <img alt="@shadcn" src="https://github.com/shadcn.png">
        <img alt="@adamwathan" src="https://github.com/adamwathan.png">
      </div>

      <div class="flex -space-x-2 hover:space-x-1 [&_img]:ring-background [&_img]:size-12 [&_img]:shrink-0 [&_img]:object-cover [&_img]:rounded-full [&_img]:ring-2 [&_img]:grayscale [&_img]:transition-all [&_img]:ease-in-out [&_img]:duration-300">
        <img alt="@hunvreus" src="https://github.com/hunvreus.png">
        <img alt="@shadcn" src="https://github.com/shadcn.png">
        <img alt="@adamwathan" src="https://github.com/adamwathan.png">
      </div>
    </div>
  </div>
</section>